import {
  animate,
  AnimationTriggerMetadata,
  group,
  query,
  stagger,
  style,
  transition,
  trigger,
} from '@angular/animations';
import { MotionDuration, MotionFunc, noAnimationToVoid } from '../core/api';

export const treeCollapseMotion: AnimationTriggerMetadata = trigger('treeCollapseMotion', [
  noAnimationToVoid,
  transition('* => *', [
    query(
      'lv-tree-node:leave',
      [
        style({ overflow: 'hidden' }),
        stagger(0, [
          group([
            animate(`${MotionDuration.MD} ${MotionFunc.EASE_IN_OUT}`, style({ opacity: 0 })),
            animate(`${MotionDuration.MD} ${MotionFunc.EASE}`, style({ height: 0 })),
          ]),
        ]),
      ],
      { optional: true },
    ),
    query(
      'lv-tree-node:enter',
      [
        style({ overflow: 'hidden', height: 0, opacity: 0 }),
        stagger(0, [
          group([
            animate(`${MotionDuration.LG} ${MotionFunc.EASE_IN_OUT}`, style({ opacity: '*' })),
            animate(`${MotionDuration.LG} ${MotionFunc.EASE}`, style({ height: '*' })),
          ]),
        ]),
      ],
      { optional: true },
    ),
  ]),
]);
